<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>备忘录</h1>
    <p><input type="text" placeholder="请输入备忘录" v-model="memo"><button @click="addMemo">添加备忘录</button></p>
    <span v-show="memos.length==0">备忘录为空,请添加备忘录</span>
    <ul>
        <li v-for="(memo,index) in memos">{{memo}}<button @click="deleteMemo(index)">删除</button></li>
    </ul>
    <p><button @click="clearMemos">清空备忘录</button></p>
    <p>备忘录共有 {{memos.length}} 条</p>
</div>

<script src="../js/vue.js"></script>
<script>
    const vm = new Vue({
        el:'#app',
        data:{
            memos:[
                "第一条备忘录","第二条备忘录","第三条备忘录"
            ],
            memo:''
        },
        methods:{
            // 添加备忘录
            addMemo(){
                if(!this.memo.trim()){
                    alert("请填写备忘录")
                    this.memo = ''
                    return
                }
                // 添加数据到数组
                this.memos.push(this.memo)
                // 添加完毕 清空表单控件
                this.memo = ''
            },
            // 清空备忘录
            clearMemos(){
                this.memos=[]
            },
            // 删除指定备忘录
            deleteMemo(index){
                //  splice(startNumber,count)  参数1 代表起始位置  参数2  删除元素的个数
                this.memos.splice(index,1)
            }
        }
    })
</script>

</body>
</html>
